<template>
  <!-- 分类 -->
  <div class="classify">
    <!-- 搜索 -->
    <van-search v-model="value" placeholder="点击前往搜索" @focus="onSearch" />
    <!-- 侧边导航 -->
    <div class="bodys">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          v-for="item in categoryList"
          :key="item.id"
          :title="item.name"
          @click="hander(item.id)"
        />
      </van-sidebar>
      <div class="contentRight">
        <img :src="currentCategory.picUrl" alt="" />
        <p>{{ currentCategory.desc }}</p>
        <!-- 下面商品列表 -->
        <van-grid :column-num="3">
          <van-grid-item
            v-for="(value, index) in currentSubCategory"
            :key="value.id"
            :to="'/ulList?id=' + value.id"
            @click="onclick(index)"
          >
            <img :src="value.picUrl" alt="" style="width: 70px" />
            <span>{{ value.name }}</span>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  name: 'classify',
  components: {},
  data () {
    return {
      // 搜索
      value: '',
      // 选中
      activeKey: 0,
      // Grid宫格
      categoryList: [],
      // 图片
      currentCategory: [],
      // 类别
      currentSubCategory: []
    }
  },
  // 计算属性
  computed: {},
  watch: {},
  mounted () {
    // 发起请求
    request({ url: '/catalog/index' }).then((res) => {
      const { data } = res.data
      this.currentCategory = data.currentCategory
      this.currentSubCategory = data.currentSubCategory
      this.categoryList = data.categoryList
      // console.log(data)
    })
  },
  methods: {
    onSearch () {
      this.$router.push('search')
      console.log(122)
    },
    hander (id) {
      request({ url: '/catalog/current?id=' + id }).then((res) => {
        const { data } = res.data
        this.currentCategory = data.currentCategory
        this.currentSubCategory = data.currentSubCategory
        // console.log(data)
      })
    },
    onclick (index) {
      // console.log(index)
      // this.activeKey = index
    }
  }
}
</script>

<style lang="scss" scoped>
.bodys {
  display: flex;
}
.contentRight {
  width: 100%;
  height: 100%;
  padding: 10px 20px;
}
.contentRight img {
  width: 280px;
}
.contentRight p {
  text-align: center;
}
.van-grid-item img {
  width: 100%;
}
</style>
